<template>
  <div class="data-table">
    <!-- <el-row>
      <el-col :span="24">
        <div class="data-top">
          <div class="img"><el-icon><List /></el-icon> </div>
          <span class="title">商品列表</span>
        </div>
      </el-col>
    </el-row> -->
    <!-- <i :class="List"></i> -->
    <header-title :title='title' :icon='icon'></header-title>
    <el-row>
      <el-col :span="24">
        <div class="data-bottom">
            
        <!-- 添加商品按钮 -->
        <el-button class='bottom-btn' type="primary" @click="showAddProductDialog">添加商品</el-button>
  
          <el-row>
            <el-col :span="24">
              <div>
                <el-table :data="shopItems" tooltip-effect="dark" style="width: 100%" border
                  height="calc(100vh - 216px)">
                  <!-- 商品列表 -->
                  <el-table-column prop="id" label="ID" width="50" />
                  <el-table-column prop="name" label="商品名称" />
                  <el-table-column prop="category" label="商品分类" />
                  <el-table-column label="商品图片">
                    <template #default="scope">
                      <img :src="scope.row.image" class="image" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="description" label="商品描述">
                    <template #default="scope">
                      <div class="description">{{ scope.row.description }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="price" label="商品价格" />

                  <el-table-column label="操作" width="300">
                    <template #default="scope">
                      <el-button type="primary" @click="showDetails(scope.row)">详情</el-button>
                      <!-- <el-button type="primary" @click="detail(scope.row.id)">详情</el-button> -->
                      <el-button type="warning" @click="showEditProductDialog(scope.row)">编辑</el-button>
                      <el-button type="danger" @click="deleteProduct(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- <vxe-table :data="tableData" border resizable height="350">
                  <vxe-table-column type="selection" width="55">
                  </vxe-table-column>
                  <vxe-table-column field="list_name" title="产品名" />
                  <vxe-table-column field="list_img" title="图片" />
                  <vxe-table-column field="list_sort" title="分类" />
                  <vxe-table-column field="list_price" title="价格" />

                </vxe-table> -->

              </div>
            </el-col>
          </el-row>

          <!-- 添加商品的弹窗 -->
          <el-dialog title="添加新商品" v-model="isAddProductDialogVisible" width="400px">
            <el-form :model="newProduct">
              <el-form-item label="商品名称">
                <el-input v-model="newProduct.name"></el-input>
              </el-form-item>
              <el-form-item label="商品描述">
                <el-input v-model="newProduct.description"></el-input>
              </el-form-item>
              <el-form-item label="商品价格">
                <el-input v-model="newProduct.price"></el-input>
              </el-form-item>
              <el-form-item label="商品图片">
                <el-upload action="#" list-type="picture-card" :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove" :auto-upload="false" v-model:file-list="newProduct.image" :limit="1">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="商品分类">
                <el-select v-model="newProduct.category" placeholder="请选择商品分类">
                  <el-option label="玫瑰花" value="玫瑰花"></el-option>
                  <el-option label="桔梗花" value="桔梗花"></el-option>
                  <el-option label="满天星" value="满天星"></el-option>
                  <el-option label="百合花" value="百合花"></el-option>
                  <el-option label="向日葵" value="向日葵"></el-option>
                </el-select>
              </el-form-item>

            </el-form>
            <template #footer>
              <el-button @click="isAddProductDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="confirmAddProduct">确定</el-button>
            </template>
          </el-dialog>

          <!-- 编辑商品的弹窗 -->
          <el-dialog title="编辑商品" v-model="isEditProductDialogVisible" width="400px">
            <el-form :model="editedProduct">
              <img :src="editedProduct.image" class="detail-image">
              <el-form-item label="商品名称">
                <el-input v-model="editedProduct.name"></el-input>
              </el-form-item>
              <el-form-item label="商品描述">
                <el-input v-model="editedProduct.description"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <el-button @click="isEditProductDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="confirmEditProduct">保存</el-button>
            </template>
          </el-dialog>

          <!-- 商品详情的弹窗 -->
          <!-- <el-dialog title="商品详情" v-model="isDetailDialogVisible" width="400px">
            <div v-if="selectedProduct">
              <img :src="selectedProduct.image" class="detail-image">
              <p><strong>商品名称:</strong> {{ selectedProduct.name }}</p>
              <p><strong>商品描述:</strong> {{ selectedProduct.description }}</p>
              <p><strong>商品分类:</strong> {{ selectedProduct.category }}</p>
            </div>
            <template #footer>
              <el-button @click="isDetailDialogVisible = false">关闭</el-button>
            </template>
          </el-dialog> -->
           <!-- 商品详情的弹窗 -->
           <el-dialog title="商品详情" v-model="isDetailDialogVisible" width="400px">
            <el-form :model="selectedProduct">
              <img :src="selectedProduct.image" class="detail-image">
              <el-form-item label="商品名称">
                <el-input disabled v-model="selectedProduct.name"></el-input>
              </el-form-item>
              <el-form-item label="商品价格">
                <el-input disabled v-model="selectedProduct.price"></el-input>
              </el-form-item>
              <el-form-item label="商品描述">
                <el-input disabled v-model="selectedProduct.description"></el-input>
              </el-form-item>
              <el-form-item label="商品分类">
                <el-input disabled v-model="selectedProduct.category"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <el-button @click="isDetailDialogVisible = false">关闭</el-button>
            </template>
          </el-dialog>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>

import { ref, reactive, onMounted, computed, nextTick } from 'vue';
import { getProductList } from '@/api/product.js';
// 引入商品的pinia
import { useProductDatatore } from '@/stores/product.js'

import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'

// 头部标题header
import HeaderTitle from '@/components/HeaderTitle.vue'
const title = ref('商品列表')
const icon = ref('List')

// 默认商品数据
const tableData = ref([{},
]);

// 使用商品pinia
const productStore = useProductDatatore()

// 使用路由
const router = useRouter()

const isAddProductDialogVisible = ref(false) // 添加商品弹窗的可见性
const isEditProductDialogVisible = ref(false) // 编辑商品弹窗的可见性
const isDetailDialogVisible = ref(false) // 商品详情弹窗的可见性
const selectedProduct = ref(null) // 选中的商品

const getProductListData = async () => {
  try {
    const res = await getProductList();
    if (res.data.code === 200) {
      tableData.value = res.data.product;
      // 添加到pinia
      productStore.addProduct(res.data.product)
    }
  } catch (error) {
    console.error("Error", error);
  }
};


const editedProduct = ref({
  id: null,
  name: '',
  description: '',
  image: ''
}) // 被编辑的商品
const newProduct = ref({
  name: '',
  description: '',
  image: [],
  price: ''
}) // 新商品

// 显示添加商品弹窗
const showAddProductDialog = () => {
  isAddProductDialogVisible.value = true
}

// 确认添加商品
const confirmAddProduct = () => {
  const product = {
    ...newProduct.value,
    id: productStore.shopDatas.length + 1,
    image: newProduct.value.image.length > 0 ? newProduct.value.image[0].url : '' // 获取上传的图片 URL
  }
  productStore.addProduct(product)
  isAddProductDialogVisible.value = false
  newProduct.value = { name: '', description: '', image: [], price: '' } // 重置表单
}

// 显示编辑商品弹窗
const showEditProductDialog = (product) => {
  editedProduct.value = { ...product }
  isEditProductDialogVisible.value = true
}

// 确认编辑商品
const confirmEditProduct = () => {
  productStore.editProduct(editedProduct.value)
  isEditProductDialogVisible.value = false
}

// 显示商品详情弹窗
const showDetails = (product) => {
  selectedProduct.value = product
  isDetailDialogVisible.value = true
}



// 删除商品
const deleteProduct = (id) => {

  ElMessageBox.confirm('确定要删除此商品吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    productStore.deleteProduct(id)
    ElMessage({
      type: 'success',
      message: '删除成功!',
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}



// 处理图片预览
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}

// 处理图片删除
const handleRemove = (file, fileList) => {
  ElMessageBox.confirm(
    '确定移除此文件？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const index = fileList.indexOf(file)
    if (index !== -1) {
      fileList.splice(index, 1)
    }
  })
}

// // 商品详情页，通过id传参
// const detail = (id) => {
//   router.push({ path: `/details/${id}` });
// }


onMounted(() => {
  productStore.fetchshopData();
});
const shopItems = computed(() => productStore.shopItems);

</script>


<style scoped lang='scss'>

.data-table {
  width: 100%;
  height: 100%;
  padding: 0 10px;

  .data-top {
    width: 100%;
    height: 50px;
    // background-color: antiquewhite;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    color: #478fca;
    font-size: 20px;

    .img {
      width: 25px;
      height: 25px;
          display: flex;
    align-items: center;
    }

    .title {
      font-size: 16px;
    display: flex;
    align-items: center;
    }
  }

  .data-bottom {
    width: 100%;
    // height: calc(100vh - 120px);

    // background-color: rgb(212, 127, 16);
    .bottom-btn {
      margin: 5px 5px 5px 0;
      font-size: 12px;
    }
    // 表格图片
    .image {
      width: 50px;
      height: 50px;
      object-fit: cover;
      
    }
    // 详情图片
    .detail-image {
      width: 100px;
      height: auto;
      margin-bottom: 15px;
    }
    /* 商品描述 */
    .description {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px; /* 根据需要调整最大宽度 */
    }
  }
}
</style>